<template>
  <div class="toppic-box">
    <!-- <up-skeleton v-if="loading" rows="9" title :loading="loading" :animate="true"
			style="margin-top: 20rpx;"></up-skeleton> -->
    <div class="tab-box">
      <div
        :class="['tabs', index === tabsIndex && 'tabs-active']"
        v-for="(item, index) in tabsList"
        @click="clickTabs(index)"
        :key="`topic${index}`"
      >
        {{ item.name }}
      </div>
    </div>
    <div
      class="tabs-item-box"
      v-for="(item, index) in tabsList"
      :key="`item${index}`"
    >
      <TopicType
        v-for="(topicItem, topicIndex) in item.children"
        :record="topicItem"
        :index="topicIndex"
        :key="`toppic${topicIndex}`"
        @reload="reload"
        v-show="index === tabsIndex"
      ></TopicType>
    </div>
  </div>
</template>

<script setup>
import { ref, defineExpose, onMounted } from "vue";
import topicApi from "@/api/topicApi";
import TopicType from "./TopicType";
import { hoursDifference } from "@/utils/utils";

const tabsIndex = ref(0);
const tabsList = ref([]);
const loading = ref(false);

// 切换tabs
const clickTabs = (index) => {
  tabsIndex.value = index;
};

// 获取数据
// const getData = async () => {
// 	const topic_cache = uni.getStorageSync("topic_cache") && JSON.parse(uni.getStorageSync("topic_cache"));
// 	const topic_cache_time = uni.getStorageSync("topic_cache_time");
// 	const isRequest = hoursDifference(topic_cache_time, Date.now());
// 	if (topic_cache.length > 0 && !isRequest) {
// 		tabsList.value = topic_cache;
// 	} else {
// 		loading.value = true;
// 		const result = await topicApi.topicCategory(21);
// 		uni.setStorageSync("topic_cache", JSON.stringify(result.data));
// 		uni.setStorageSync("topic_cache_time", Date.now());
// 		tabsList.value = result.data;
// 		loading.value = false;
// 	}
// }

const getData = async () => {
  loading.value = true;
  const result = await topicApi.topicCategory(15);
  tabsList.value = result.data;
  console.log("tabsList", tabsList.value);
  loading.value = false;
};

// 刷新数据
const reload = async () => {
  const result = await topicApi.topicCategory(21);
  // uni.setStorageSync("topic_cache", JSON.stringify(result.data));
  // uni.setStorageSync("topic_cache_time", Date.now());
  tabsList.value = result.data;
};

onMounted(() => {
  getData();
});

defineExpose({
  reload: reload,
});
</script>

<style lang="scss" scoped>
.toppic-box {
  flex-direction: column;

  .tab-box {
    display: flex;
    flex: 1;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 20px;
    margin-bottom: 20px;

    .tabs {
      width: calc(25% - 15px);
      border-radius: 6px 6px 0px 0px;
      display: flex;
      padding: 4px 0px;
      justify-content: center;
      align-items: center;
      color: #000;
      font-size: 16px;
      line-height: 1;
      background-color: rgba($color: #f1b444, $alpha: 0.3);
    }

    .tabs-active {
      background: #f1b444;
      font-weight: 500;
    }
  }

  .tabs-item-box {
    display: flex;
    flex-direction: column;
  }
}
</style>
